<script setup>
import { h, ref } from 'vue';
import { SettingOutlined, InfoCircleOutlined, AliwangwangOutlined, RadarChartOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { spotsInfoStore } from '@/stores/spots';
const spotsStore = spotsInfoStore()
const router = useRouter()
const open = ref(false);
const user = JSON.parse(localStorage.getItem('user'))


const showModal = () => {
    open.value = true;
};
const showai = () => {
    spotsStore.SetAiOpen(!spotsStore.aiOpen)
}

const handleOk = e => {
    open.value = false;
};
const outSystem = () => {
    localStorage.clear('user')
    router.push('/login')
}
</script>

<template>
    <div class="search">
        <a-button shape="circle" @click="showai">
            <template #icon>
                <AliwangwangOutlined spin />
                <!-- <RadarChartOutlined spin /> -->
            </template>
        </a-button>
    </div>
    <div class="search">
        <a-button type="primary" danger shape="circle" :icon="h(InfoCircleOutlined)" @click="showModal"></a-button>
        <a-modal v-model:open="open" title="系统介绍" @ok="handleOk">

        </a-modal>
    </div>
    <div class="name">
        <a-button type="text">欢迎用户：{{ user.username }}</a-button>
    </div>
    <div class="image">
        <a-avatar :src=user.picture />
    </div>
    <div class="setting">
        <a-dropdown>
            <a-button type="primary" danger shape="circle" :icon="h(SettingOutlined)"></a-button>
            <template #overlay>
                <a-menu @click="outSystem">
                    <a-menu-item>退出系统</a-menu-item>
                </a-menu>
            </template>
        </a-dropdown>
    </div>
</template>

<style lang="scss" scoped>
.setting {
    margin: 0 10px;
}

.image {
    margin: 0 10px;
}

.search {
    margin: 0 20px;
}

.custom-icons-list :deep(.anticon) {
    margin-right: 6px;
}
</style>